<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery_html_val</title>
		<style type = "text/css"></style>
		<script type="text/javascript" src="jquery-3.4.1.js">
			<!-- 
			===获得内容 - text()、html() 以及 val()
			text() - 设置或返回所选元素的文本内容
			html() - 设置或返回所选元素的内容（包括 HTML 标记）
			val() - 设置或返回表单字段的值
			
			===设置内容 - text()、html() 以及 val()
			    text() - 设置或返回所选元素的文本内容
			    html() - 设置或返回所选元素的内容（包括 HTML 标记）
			    val() - 设置或返回表单字段的值
				
			===text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：
			被选元素列表中当前元素的下标，以及原始（旧的）值。
			然后以函数新值返回您希望使用的字符串。

			 -->
			 
		</script>
	</head>
	<body>
		<!-- ul>li{$}*5 -->
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<input type="text">
		<script>
			/* html属性值的获取和设定 */
			console.log($("ul").html());//获取
			$("li").html("hello world");//设定
			
			/* val属性值的获取和设定 */
			$("input").keyup(function(){
				var v = $("input").val();//获取
				console.log(v);
				if(v.slice(-2) !== "px"){//设定
					$("input").val(v + "px");
				}
			})
		</script>
	</body>
</html>
